import { Link, Route, RouteComponentProps, Redirect } from "react-router-dom"
import { FC } from "react"
import Paylist from "./Paylist"
import Toplist from "./Toplist"
import qr from "query-string"

//嵌套路由存在的问题:1级路由如果 ,2级路由匹配的路径是写死的那么就容易让嵌套页面不能匹配


const Discover: FC<RouteComponentProps <any,any,{query:object}>> = (props) => {
    // console.log(props);
    let { match: { path }, location } = props
    console.log(location);
    
    let query = qr.parse(location.search)
    // console.log(query);

    return (
        <fieldset>
            <legend>发现</legend>
            <ul>
                <li>
                    <Link to={`${path}/paylist`}>歌单</Link>
                </li>
                <li>
                    <Link to={`${path}/toplist`}>排行榜</Link>
                </li>
                <Redirect to={`${path}/paylist`} from={path} />
                <Route path={`${path}/paylist`} component={Paylist}></Route>
                <Route path={`${path}/toplist`} component={Toplist}></Route>
            </ul>
        </fieldset>
    )
}

export default Discover